var path = require('path');
var webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin"); // 引入分离CSS样式文件的第三方包
const cleanWebpackPlugin = require('clean-webpack-plugin'); // 引入清除文件夹的插件

//module.exports 导出这个配置对象，供webpack在合并时候进行操作
module.exports = {
    entry: {
        app:path.resolve(__dirname, 'src/js/app.js'), // 自己的逻辑代码入口
        vendors:['jquery', 'react', 'react-dom'] // 依赖的第三方包的入口
    },//这是我们需要合并的源文件
    output:{// 是我们将来要输出的目标文件的相关属性
        path: path.resolve(__dirname, 'dist'),//输出的路径
        filename: 'bundle.js'//输出的文件名
    },
    plugins:[ // webpck的插件
        new webpack.optimize.CommonsChunkPlugin({
            name:'vendors', // 指定抽离第三方包的入口名称
            filename : 'vendors.js' // 抽离出的公共模块名称
        }), // webpack提供的抽离公共第三方包的插件
        new webpack.optimize.UglifyJsPlugin({
            compress:{ // 压缩选项
                warnings:false // 去除打包好的文件中的警告信息
            }
        }),// 帮助我们压缩JS代码的插件
        new webpack.DefinePlugin({ // 定义的插件，设置为产品上线环境，进一步优化压缩
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        }),
        new ExtractTextPlugin("styles.css"), //将分离出来的CSS样式，写入到styles.css
        new cleanWebpackPlugin(['dist']), // 使用cleanWebpackPlugin插件，传入需要清楚的文件夹名称数组
    ],
    module:{ // 配置一些模块
        rules:[ // 会有很多很多的loader模块规则
            {//用来处理CSS文件的loader配置项
                test:/\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                }) // 这个用test匹配到的CSS文件，用use里面的loader进行处理
            },
            {
                test:/\.(jpg|png|gif)$/,
                use:'url-loader?limit=20000&name=images/[name].[ext]' // 用这个url-loader，来处理图片相关的文件
            },
            {
                test:/\.scss$/,
                use: ExtractTextPlugin.extract({ //抽离Sass样式的配置项
                    fallback: "style-loader",
                    use: "css-loader!sass-loader"
                }) //使用sass-loader处理sass文件的打包
            },
            {
                test:/\.jsx?$/,
                use:{ // use可以是一个对象
                    loader:'babel-loader', //转换器的名字
                    options:{ //babel-loader的配置选项
                        presets:['es2015', 'react']// 配置转换的语法格式
                    }
                }
            }
        ]
    }
}